<template>
  <view class="userinfo">
    <view class="title">
      <view class="icon">
        <image :src="user.imgSrc" mode="" />
      </view>
      <view class="info">
        <view>{{ user.name }}</view>
        <view>{{ user.subtitle }}</view>
      </view>
    </view>
    <!-- 信息显示 -->
    <view class="menu" v-show="chanceshow == false">
      <view class="menu_item" v-for="(item, index) in menu" :key="index">
        <image :src="item.imgSrc" mode="" />
        <view>{{ item.text }}</view>
        <view
          :style="item.text == '联系方式' ? 'color:#3074FF' : ''"
          @tap="telPhone(item.text, item.title)"
          >{{ item.title }}</view
        >
      </view>
    </view>
    <!-- 信息修改 -->
    <view class="menu" v-show="chanceshow == true">
      <view class="menu_item">
        <image :src="chancemenu[0].imgSrc" mode="" />
        <view>{{ chancemenu[0].text }}</view>
        <view @tap="chancePosition()">{{ chancemenu[0].title }}</view>
      </view>
      <view class="menu_item">
        <image :src="chancemenu[1].imgSrc" mode="" />
        <view>{{ chancemenu[1].text }}</view>
        <view @tap="chanceRole()">{{ chancemenu[1].title }}</view>
      </view>
      <view class="menu_item">
        <image :src="chancemenu[2].imgSrc" mode="" />
        <view>{{ chancemenu[2].text }}</view>
        <input
          v-model="chancemenu[2].title"
          placeholder="请输入新的电话号码..."
        />
      </view>
    </view>
    <view class="editor" v-show="chanceshow == false" @tap="chanceshow = true"
      >编辑</view
    >
    <view
      class="editor"
      style="background-color: #5cb85c"
      v-show="chanceshow == true"
      @tap="submitChance()"
      >提交</view
    >
    <!-- 是否拨打电话 -->
    <u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
    <!-- 选择修改 -->
    <u-picker
      mode="selector"
      v-model="showPicker"
      :default-selector="[0]"
      :range="selectorObj"
      range-key="cateName"
      @confirm="confirmPicker"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "苏小落",
        subtitle: "城建局-办公室",
        imgSrc:
          "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
      },
      menu: [
        {
          imgSrc: "../../../static/image/contactuser/userinfo/position.png",
          text: "职务",
          title: "办公室主任",
        },
        {
          imgSrc: "../../../static/image/contactuser/userinfo/role.png",
          text: "角色",
          title: "部门领导",
        },
        {
          imgSrc: "../../../static/image/contactuser/userinfo/phone.png",
          text: "联系方式",
          title: "177 5971 1111",
        },
      ],
      chancemenu: [
        {
          imgSrc: "../../../static/image/contactuser/userinfo/position.png",
          text: "职务",
          title: "办公室主任",
        },
        {
          imgSrc: "../../../static/image/contactuser/userinfo/role.png",
          text: "角色",
          title: "部门领导",
        },
        {
          imgSrc: "../../../static/image/contactuser/userinfo/phone.png",
          text: "联系方式",
          title: "177 5971 1111",
        },
      ],
      show: false,
      phone: "",
      content: "是否拨打该号码?",
      chanceshow: false,
      showPicker: false,
      typePicker: "",
      selectorObj: [],
    };
  },
  onLoad() {},
  methods: {
    telPhone(text, phone) {
      if (text == "联系方式") {
        this.show = true;
        this.phone = phone;
      }
    },
    // 拨号
    confirm() {
      uni.makePhoneCall({
        phoneNumber: this.phone,
      });
    },
    // 修改职务
    chancePosition() {
      this.selectorObj = [
        {
          cateName: "职务1",
          id: 1,
        },
        {
          cateName: "职务2",
          id: 2,
        },
      ];
      this.typePicker = "zhiwu";
      this.showPicker = true;
    },
    // 修改角色
    chanceRole() {
      this.selectorObj = [
        {
          cateName: "角色1",
          id: 1,
        },
        {
          cateName: "角色2",
          id: 2,
        },
      ];
      this.typePicker = "juese";
      this.showPicker = true;
    },
    confirmPicker(e) {
        console.log(e)
      if (this.typePicker == "zhiwu") {
        this.chancemenu[0].title = this.selectorObj[e].cateName;
      }
      if (this.typePicker == "juese") {
        this.chancemenu[1].title = this.selectorObj[e].cateName;
      }
    },
    // 提交修改
    submitChance() {
      this.chanceshow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.userinfo {
  width: 100%;

  .title {
    width: 100%;
    height: 400rpx;
    background-image: url("../../../static/image/contactuser/userinfo/userinfo_bg.png");
    background-size: 100% 100%;
    padding: 0 60rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    .icon {
      width: 172rpx;
      height: 172rpx;
      border-radius: 50%;
      position: relative;

      image {
        width: 162rpx;
        height: 162rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
      }
    }
    .info {
      margin-left: 23rpx;
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      view:nth-child(1) {
        font-size: 48rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      view:nth-child(2) {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.6;
        margin-top: 16rpx;
      }
    }
  }
  .menu {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;

    .menu_item {
      flex: 1;
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: center;
      image {
        display: block;
        width: 64rpx;
        height: 64rpx;
      }
      view:nth-child(2) {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
        margin-top: 8rpx;
      }
      view:nth-child(3) {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #585f6b;
        margin-top: 24rpx;
      }
      input {
        display: block;
        color: #3074ff;
        text-align: center;
        margin-top: 24rpx;
      }
    }
  }
  .editor {
    width: 640rpx;
    height: 96rpx;
    line-height: 96rpx;
    background: #3074ff;
    border-radius: 8rpx;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    position: fixed;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
